  <template>
  <div>
      <TotalityAdd :consts="counts"/>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="number" label="试题编号" width="120">
    </el-table-column>
    <el-table-column prop="subject" label="学科" width="98"> </el-table-column>
    <el-table-column prop="catalog" label="目录" width="98"> </el-table-column>
    <el-table-column  label="题型" width="98">
      <template #default="{row}">
        {{row.questionType==='1'?'单选':'多选'}}
      </template>
    </el-table-column>
    <el-table-column  label="题干" width="280">
      <template #default='{row}'>
        <div v-html="row.question"></div>
      </template>
       </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="180">
      <template #default="{row}">
        {{row.addDate|Day}}
      </template>
    </el-table-column>
    <el-table-column label="难度" width="98">
       <template #default="{row}">
        {{difficultys(row.difficulty)}}
      </template>
    </el-table-column>
    <el-table-column prop="creator" label="录入人" width="98">
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="{row}">
        <el-button @click="onSpring(row.id)" size="small" type="primary" icon="el-icon-view" plain circle></el-button>
        <el-button @click="modifyFn(row.id)" size="small" type="success" icon="el-icon-edit" plain circle></el-button>
        <el-button @click="onDelFn(row)" size="small" type="danger" icon="el-icon-delete" plain circle></el-button>
        <el-button @click="selectedFn(row.id)" size="small" type="warning" icon="el-icon-check" plain circle></el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      background
      :page-sizes="[5, 10, 20, 50]"
      :page-size="5"
      :total="counts"
      layout="prev, pager, next,sizes, jumper">
    </el-pagination>
  </div>
  <SpringDialog :dialog-visible="dialogVisible" @handle-close="handleClose" :dialog-data="dialogData"/>
  </div>
</template>

<script>
import { list, choiceAdd, remove, detail } from '@/api/hmmm/questions'
import SpringDialog from './SpringDieng'
export default {
  components: {
    SpringDialog
  },
  data () {
    return {
      tableData: [],
      currentPage4: 1,
      counts: null,
      page: {
        page: 1,
        pagesize: 5
      },
      dialogVisible: false,
      dialogData: {}
    }
  },
  mounted () {
    this.hGetList()
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.dialogVisible = false
    },
    // 弹框
    async onSpring (id) {
      this.dialogVisible = true
      const res = await detail({ id })
      this.dialogData = res.data
    },
    // 修改
    async modifyFn (id) {
      // this.$router.push()
      const res = await detail({ id })
      console.log(res)
    },
    // 删除
    onDelFn (data) {
      this.$confirm('此题库确定删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.hGetList()
        this.$message({
          type: 'success',
          message: '删除题库成功!'
        })
      }).catch(() => {})
    },
    // 加入精选
    selectedFn (id) {
      this.$confirm('此题库添加到精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id, choiceState: 1 })
        this.hGetList()
        this.$message({
          type: 'success',
          message: '添加精选题库成功!'
        })
      }).catch(() => {

      })
    },
    // 控制条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.hGetList()
    },
    // 控制页数
    handleCurrentChange (val) {
      this.page.page = val
      this.hGetList()
    },
    // 渲染列表接口
    async hGetList (data) {
      const newArr = {}
      for (const key in data) {
        if (data[key]) {
          newArr[key] = data[key]
        }
      }
      const res = await list({ ...this.page, ...newArr })
      this.tableData = res.data.items
      this.counts = res.data.counts
    }
  }
}
</script>
<style lang="scss" scoped>
.block{
    margin-top: 20px;
    text-align: right;
    ::v-deep .el-pagination__jump{
        margin: 0;
    }
}

.bottoms{
  margin-bottom: 10px;
  .bg-purple-dark {
  background: #f4f4f5;
  color: #909399;
  border-radius: 4px;
  min-height: 36px;
  padding: 10px 15px;
}
}
</style>
